<template>
    <div id="index">
        <!-- 第一行头部 -->
        <!-- <el-row>
            <el-col :span="24">

                <div class="time">
                    <span style=" font-size: 55px; float:left; text-shadow: 0px 2px 5px rgba(238, 238, 240, 0.4);">{{
                            nnow
                    }}</span>
                    <span style="font-size: 16px; display:inline-block; margin-top:10px; padding-left:10px"> {{
                            ndate
                    }} </span>
                    <br>
                    <span style="font-size: 16px; display:inline-block; margin-top:5px; padding-left:10px">星期{{
                            nweek
                    }}</span>

                </div>
            </el-col>
        </el-row> -->
        <div class="first">
            <div class="L" style="width: 50%;">
                <p>设备总有功功率统计</p>

                <el-table :data="tableDate"
                    :header-cell-style="{ textAlign: 'center', backgroundColor: '#009FA8', color: 'white' }" border
                    style="width: 90% ;margin:0 auto; margin-top: 50px;" :cell-style="{ textAlign: 'center' }">
                    <!-- :header-cell-style="{ background: '#6eaef5', color: '#ffffff' }" -->
                    <el-table-column prop="apA" label="A项有功功率 (W)">
                    </el-table-column>
                    <el-table-column prop="apB" label="B项有功功率 (W)">
                    </el-table-column>
                    <el-table-column prop="apC" label="C项有功功率 (W)">
                    </el-table-column>
                    <el-table-column prop="apAll" label="总有功功率 (W)">
                    </el-table-column>
                    <el-table-column prop="recordTime" label="时间 (time)">
                    </el-table-column>
                </el-table>

            </div>
            <!-- <p><span>设备总有功功率统计</span> <span>设备电流</span> <span>设备电压</span></p> -->


            <!-- 表格 -->
            <div class="C" style="width: 25%;">
                <p>设备电流</p>


                <el-table :data="tableDate" border
                    :header-cell-style="{ textAlign: 'center', backgroundColor: '#009FA8', color: 'white' }"
                    style="width: 90% ;margin:0 auto; margin-top: 50px;" :cell-style="{ textAlign: 'center' }">
                    <!-- :header-cell-style="{ background: '#6eaef5', color: '#ffffff' }" -->
                    <el-table-column prop="ia" label="A项电流 (A)">
                    </el-table-column>
                    <el-table-column prop="ib" label="B项电流 (A)">
                    </el-table-column>
                    <el-table-column prop="ic" label="C项电流 (A)">
                    </el-table-column>

                </el-table>


            </div>
            <div class="R" style="width: 25%;">
                <p>设备电压</p>
                <el-table :data="tableDate"
                    :header-cell-style="{ textAlign: 'center', backgroundColor: '#009FA8', color: 'white' }" border
                    style="width: 90% ;margin:0 auto; margin-top: 50px;" :cell-style="{ textAlign: 'center' }">
                    <!-- :header-cell-style="{ background: '#6eaef5', color: '#ffffff' }" -->

                    <el-table-column prop="ua" label="A项电压 (V)">
                    </el-table-column>
                    <el-table-column prop="ub" label="B项电压 (V)">
                    </el-table-column>
                    <el-table-column prop="uc" label="C项电压 (V)">
                    </el-table-column>

                </el-table>



            </div>
        </div>
        <el-table
    :data="tableData2"
    border
    :header-cell-style="{ textAlign: 'center', background: '#009FA8', color: '#ffffff' }"
    :cell-style="{ textAlign: 'center' }"
    style="width: 30%; margin:50px auto"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="limitName"
      label="设备名称"
      
     >
    </el-table-column>
    <el-table-column
      prop="deviceState"
      label="设备状态"
      
     >
    </el-table-column>
  </el-table>
        <el-table
    :data="tableData1"
    border
    :header-cell-style="{ textAlign: 'center', background: '#009FA8', color: '#ffffff' }"
    :cell-style="{ textAlign: 'center' }"
    style="width: 30%;margin:50px auto;"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="limitName"
      label="设备名称"
     
     >
    </el-table-column>
    <el-table-column
      prop="deviceState"
      label="设备状态"
      
     >
    </el-table-column>
  </el-table>
        <div id="main" style="height:400px;margin: auto; "></div>
        <el-table
    :data="tableData3"
    border
    :header-cell-style="{ textAlign: 'center', background: '#009FA8', color: '#ffffff' }"
    :cell-style="{ textAlign: 'center' }"
    style="width: 30%; margin:auto; "
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="limitName"
      label="设备名称"
      
     >
    </el-table-column>
    <el-table-column
      prop="deviceState"
      label="设备状态"
     
     >
    </el-table-column>
  </el-table>
        <div id="main1" style="height:400px"></div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getEleAPI, getEleDataAPI,getStateList} from '@/api/system/ttsfele'
export default {
    data() {
        return {
            tableData1:[],
      tableData2:[],
      tableData3:[],
            date: this.getNow(),
            tableDate: [],
            nowTime: '',
            newTime: "",
            nowTime: '',
            ndate: '',
            nnow: '',
            nweek: '',
            selectTime: ''
        }
    },
    mounted() {
        this.getEle()
        this.getEleData()
        this.getNowTime()
        this.State()
        //进入页面调用该方法获取当前时间
        //销毁之前定时器
        clearInterval(myTimeDisplay,MyState);
        var myTimeDisplay = setInterval(() => {
            this.getNowTime();
            //每秒更新一次时间
        }, 1000);
        var MyState = setInterval(() => {
      this.State()
      //每秒更新一次时间
    }, 600000);
    
    },
    methods: {
        // 当前时间：用于传递默认参数
        getNow() {
            var date = new Date();
            var data1 = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
            return data1
        },
        // 用于页面显示当前时间
        getNowTime() {
            var date = new Date();
            var data1 = date.getFullYear() + '年' + this.addZero((date.getMonth() + 1)) + '月' + this.addZero(date.getDate()) + '日 ';
            var now = this.addZero(date.getHours()) + ':' + this.addZero(date.getMinutes()) + ':' + this.addZero(date.getSeconds());
            var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
            var time = date.getFullYear() + '年' + this.addZero((date.getMonth() + 1)) + '月' + this.addZero(date.getDate()) + '日 ' + this.addZero(date.getHours()) + ':' + this.addZero(date.getMinutes()) + ':' + this.addZero(date.getSeconds()) + '' + '星期' + week;
            this.newTime = time;
            this.ndate = data1;
            this.nnow = now;
            this.nweek = week;
        },
        //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
        //小于10的拼接上0字符串
        addZero(s) {
            return s < 10 ? ('0' + s) : s;
        },
        getEle() {
            getEleAPI(this.date).then(res => {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                var chartDom1 = document.getElementById('main1');
                var myChart1 = echarts.init(chartDom1);
                var option1;


                option = {
                    title: {
                        text: '设备电流变化曲线图',
                        left: "center"

                    },
                    grid: {
                        top: '30%',
                        // left:'10%',
                        // right:'10%',
                        containLable:true
                    },
                    // 维度
                    legend: {
                        orient: 'vertical',
                        data: ['电流(A)'],
                        top: "10%"

                    },
                    xAxis: {
                        type: 'category',
                        data: res.data[2]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                    },
                    series: [

                        {
                            color: '#009FA8',
                            name: '电流(A)',
                            data: res.data[0],
                            type: 'line'
                        }
                    ]
                };
                option1 = {
                    title: {
                        text: '设备总有功功率变化曲线图',
                        left: "center"

                    },
                    // 维度
                    legend: {
                        orient: 'vertical',
                        data: ['总有功功率(W)'],
                        top: "10%"

                    },
                    grid: {
                        top: '30%',
                        containLable:true
                    },
                    xAxis: {
                        type: 'category',
                        data: res.data[2]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                    },
                    series: [

                        {
                            color: '#009FA8',
                            name: '总有功功率(W)',
                            data: res.data[1],
                            type: 'line'
                        }
                    ]
                };
                option && myChart.setOption(option);
                option1 && myChart1.setOption(option1);
                window.addEventListener("resize", function () {
                    myChart.resize();
                    myChart1.resize();
                });
                
                 // 需要添加延时，否则会使resize不会生效
    //   setTimeout(() => {
    //     myChart.resize()
    //     myChart1.resize()
    //   }, 500)
                // console.log(res);
            })
        },
        getEleData() {
            getEleDataAPI().then(res => {
                // console.log(res);
                this.tableDate = res.data
            })
        },
        // 设备状态接口
State(){
  // 百叶箱温度
  getStateList(11).then(res=>{
    // console.log(res);
    this.tableData1=res.data
   
  }),
  // 百叶箱湿度
  getStateList(12).then(res=>{
    // console.log(res);
    this.tableData2=res.data
 
  }),
  // 86盒温度
  getStateList(13).then(res=>{
    // console.log(res);
    this.tableData3=res.data
    
  })
  

},
tableRowClassName({row, rowIndex,}) {
//   console.log(row);
        if (row.deviceState != '正常') {
          return 'warning-row';
        } else {
          return '';
        }
       
      }
    }
}
</script>

<style lang="scss" scoped>
.L,
.C,
.R {
    float: left;
}

p {
    font-style: oblique;
    font-size: 40px;
    color: #009FA8;
    text-align: center;
    padding-top: 100px;
}
::v-deep.el-table .warning-row {
    // background: rgb(228, 46, 46); 
    color: red;
    
  }
  ::v-deep.el-table .success-row {
    background: #73e436;
  }

.first {
    width: 100%;
    height: 500px;
}
#main1{
    margin-top: 100px;
}
#index {
    width: 100%;
    height: 100%;
    // background: url("~@/images/jianbian.png");
    // background-size: cover;
    // background-size:100% 100%;
}
</style>